<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<!--<div class="place">-->
<!--    <span>位置：</span>-->
<!--    <ul class="placeul">-->
<!--    <li><a href="#">首页</a></li>-->
<!--    <li><a href="#">商品管理</a></li>-->
<!--    </ul>-->
<!--</div>-->

<!--<div class="rightinfo">-->
<!--<div class="tools">-->
<!--    <ul class="toolbar">-->
<!--        <li class="click"><span><img src="images/t01.png" /></span>保存</li>-->
<!--    </ul>-->
<!--</div>-->

<div class="container" style="max-width:600px;margin-top:40px;">
    <h2 class="text-center mb-4">添加商品</h2>
    <form class="form-horizontal" id="addGoodsForm">
        <div class="form-group row mb-3">
            <label for="inputDesc" class="col-sm-3 col-form-label text-end">商品描述</label>
            <div class="col-sm-9">
                <textarea id="inputDesc" class="form-control" rows="3" placeholder="请输入商品描述"></textarea>
            </div>
        </div>
        <div class="form-group row mb-3">
            <label for="inputPrice" class="col-sm-3 col-form-label text-end">商品价格</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="inputPrice" placeholder="请输入商品价格">
            </div>
        </div>
        <div class="form-group row mb-3">
            <label for="file" class="col-sm-3 col-form-label text-end">商品图片</label>
            <div class="col-sm-9">
                <input type="file" class="form-control" id="file">
                <img src="" id="img" style="width: 100px; display: none; margin-top:10px;">
            </div>
        </div>
        <div class="form-group row">
            <div class="offset-sm-3 col-sm-9">
                <button type="button" class="btn btn-primary w-100" onclick="addGoods()">保存</button>
            </div>
        </div>
    </form>
</div>
</div>

<script>
    // 预览图片功能
    document.getElementById('file').addEventListener('change', function(event) {
        const file = event.target.files[0];
        const img = document.getElementById('img');
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                img.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            img.src = '';
            img.style.display = 'none';
        }
    });

    // 添加商品功能
    function addGoods() {
        // 获取表单数据
        const desc = document.getElementById('inputDesc').value;
        const price = document.getElementById('inputPrice').value;
        const fileInput = document.getElementById('file');
        const file = fileInput.files[0];

        // 简单的表单验证
        if (!desc) {
            alert('请输入商品描述');
            return;
        }
        if (!price) {
            alert('请输入商品价格');
            return;
        }
        if (!file) {
            alert('请选择商品图片');
            return;
        }

        // 创建FormData对象
        const formData = new FormData();
        formData.append('desc', desc);
        formData.append('price', price);
        formData.append('file', file);

        // 发送请求到服务器（这里使用fetch API，你可以根据需要替换为其他方式）
        fetch('/dwjmshop/addgoods', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('商品添加成功');
                    document.getElementById('addGoodsForm').reset();
                    document.getElementById('img').style.display = 'none';
                } else {
                    alert('商品添加失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('商品添加失败');
            });
    }
</script>
</body>
</html>